<template>
	<view class="content-baisc-layout">
		<image src="https://resource.lanbaozixun.com/uploads/images/2024072216092225c338769.png" class="area-bg" mode="widthFix"></image>
		<view class=" content-area">
			 <image src="https://resource.lanbaozixun.com/uploads/images/20240722153759db7bd8799.png" mode="widthFix" class="hint-image"></image>
			<u-search 
				class="search"
				shape="square"
				color="#999999"
				placeholder-color="#999999"
				v-model="keyword"
				bgColor="transparent"
				wrapBgColor="rgba(255, 255, 255, .7)"
				:margin="'0 5%'"
				clearabled :height="74"
				hideRight
				@search="searchClient"
				@custom="searchClient"
				:actionStyle="{
				color:'#FFFFFF',
				width:'120rpx',
				height:'70rpx',
				lineHeight:'70rpx',
				borderRadius:'6rpx',
				background:'linear-gradient(180deg, #6BB2FF 0%, #437EEA 100%)',
			}"></u-search>
			
			<view class="u-padding-top-16 client-lists-area">
				<view class="client-item u-padding-16" :class="{'client-select':clientSort == k}" @click="clientSort = k" v-for="(v,k) in clientLists" :key="k">
					<view class="xl bold u-padding-bottom-10">
						{{v.company_name||v.name}}
					</view>
					<view class="md u-light-color">
						{{v.name||''}} | {{v.phone||''}} | {{v.id_code||''}}
					</view>
				</view>
			</view>
		</view>
		<view class="u-flex-col u-row-center">
			<u-button type="primary" :custom-style="{
				margin:'0 32rpx',
				background:'#437EEA',
			}" @click="apply">
				<u-icon name="share-fill" color="#FFF" size="28"></u-icon>
				<span class="u-padding-left-10">推荐客户申请</span>
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getUserClient,
		quickApplication
	} from '@/api/client'
	export default {
		data() {
			return {
				keyword:'',
				product_id:0,
				clientSort:0,
				clientLists:[]
			}
		},
		onLoad(e) {
			if(!e.id){
				this.$u.toast('请选择产品');
				uni.navigateBack();
			}else{
				this.product_id = e.id;
			}
		},
		methods: {
			async searchClient(){
				if(!this.keyword)return this.$u.toast('请输入关键词')
				let {
					code,
					data
				} = await getUserClient({
					name:this.keyword
				})
				this.clientLists = data;
			},
			async apply(){
				let {
					msg,
					code,
					data
				} = await quickApplication({
					'product_id':this.product_id,
					'client_id':this.clientLists[this.clientSort].id||0,
				})
				if(code == 1){
					uni.redirectTo({
						url: '/pages/product/qr_code_tow?id=' + data
					})
				}else{
					return this.$u.toast(msg)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		.content-baisc-layout{
			min-height: 100vh;
			padding-bottom: 40rpx;
			background: url('https://resource.lanbaozixun.com/uploads/images/202407221515441a22f6543.png') no-repeat;
			background-size: 100% 100%;
			
			.area-bg{
				width: 100vw;
				margin: 0 0;
			}
			
			.content-area{
				width: 95vw;
				padding-top: 2vh;
				margin-top: -20.5vh;
				margin-left: 2.5vw;
				margin-bottom: 5vh;
				position: relative;
				background: url('https://resource.lanbaozixun.com/uploads/images/20240722153045b42f64863.png') no-repeat;
				background-size: 100% 100%;
				
				.hint-image{
					width: 90%;
					
					margin: 4vh auto 40rpx;
					display: block;
				}
				
				.search{
					border-radius: 10rpx;
					padding: 0 !important;
				}
				
				.client-lists-area{
					min-height:320rpx;
					margin: 0 5%;
				}
			}
			
			.client-item{
				padding: 20rpx;
				border-radius: 10rpx;
				background: rgba(255, 255, 255, 0.6);
				border: 1px solid rgba(255, 255, 255, 0.6);
			}
			
			.client-select{
				color: #437EEA !important;
				border-color: #437EEA;
			}
		}
	}
</style>
